<template>
  <div class="home">
    <!-- 上方配置区域 -->
    <div class="setting">
      <!-- <h2>L频段信号交换矩阵</h2> -->
      <!-- <el-button round type="primary" size="small">配置按钮1</el-button>
      <el-button round size="small">配置按钮2</el-button>
      <el-button round type="warning" size="small">配置按钮3</el-button> -->
      <div class="label">调控状态：</div>
      <el-radio :value="deviceInfo.controlStatus" label="OFF" v-removeAriaHidden
        >本地调控</el-radio
      >
      <el-radio :value="deviceInfo.controlStatus" label="ON" v-removeAriaHidden
        >远地调控</el-radio
      >
    </div>

    <!-- 下方内容区域 -->
    <div class="container">
      <!-- 左侧拓扑图展示区域 -->
      <div ref="diagramDiv" class="diagramDiv"></div>
      <!-- <div class="btns" v-show="diagram">
        <el-button
          type="default"
          size="small"
          style="border-radius: 5px"
          @click="
            loadTuopu([
              { from: '输入1', to: '输出1' },
              { from: '输入2', to: '输出2' },
              { from: '输入3', to: '输出3' },
              { from: '输入4', to: '输出4' },
            ])
          "
          >参数配置1</el-button
        >
        <el-button
          type="default"
          size="small"
          style="border-radius: 5px"
          @click="
            loadTuopu([
              { from: '输入1', to: '输出1' },
              { from: '输入2', to: '输出3' },
              { from: '输入3', to: '输出5' },
              { from: '输入4', to: '输出7' },
            ])
          "
          >参数配置2</el-button
        >
        <el-button
          type="default"
          size="small"
          style="border-radius: 5px"
          @click="
            loadTuopu([
              { from: '输入1', to: '输出2' },
              { from: '输入2', to: '输出4' },
              { from: '输入3', to: '输出6' },
              { from: '输入4', to: '输出8' },
            ])
          "
          >参数配置3</el-button
        >
      </div> -->
      <!-- 右侧列表区域 -->
      <div class="rightTable" ref="myPaletteDiv">
        <!-- 上方设备基础信息 -->
        <!-- <div class="topContainer">
          <div class="item">厂家：{{ deviceInfo.machineFactoryInfo }}</div>
          <div class="item">设备型号：{{ deviceInfo.machineTypeInfo }}</div>
          <div class="item">设备编号：{{ deviceInfo.machineNumInfo }}</div>
          <div class="item">
            信号质量：{{ mapQuality(deviceInfo.signalQuality) }}
          </div>
        </div> -->

        <!-- 下方通道列表、展示编辑加操作 -->
        <div class="table">
          <el-table :data="channelInfoList" border size="small">
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="channelNum"
              label="输出通道"
              align="center"
              width="100px"
            >
              <template slot-scope="{ row }">
                <!-- <el-input :value="row.channelNum" size="small"></el-input> -->
                输出通道{{ row.channelNum }}
              </template>
            </el-table-column>
            <el-table-column
              prop="channelInput"
              label="输入通道"
              align="center"
            >
              <template slot-scope="{ row }">
                <el-select v-model="row.channelInput" size="small" clearable>
                  <el-option
                    v-for="item in 4"
                    :key="item"
                    :label="`输入通道${item}`"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="channelGain" label="增益" align="center">
              <template slot-scope="{ row }">
                <el-input-number
                  v-model="row.channelGain"
                  size="small"
                  :controls="true"
                  controls-position="right"
                  :step="1"
                  :min="-15"
                  :max="15"
                  style="width: 80%"
                >
                </el-input-number>
              </template>
            </el-table-column>
            <el-table-column
              prop="channelInPower"
              label="输入端口功率"
              align="center"
            >
              <template slot-scope="{ row }">
                <!-- <el-input v-model="row.channelInPower" size="small"></el-input> -->
                {{ row.channelInPower ? row.channelInPower + "dBm" : "-" }}
              </template>
            </el-table-column>
            <el-table-column
              prop="channelOutPower"
              label="输出端口功率"
              align="center"
            >
              <template slot-scope="{ row }">
                <!-- <el-input v-model="row.channelOutPower" size="small"></el-input> -->
                {{ row.channelOutPower ? row.channelOutPower + "dBm" : "-" }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="100px">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-setting"
                  size="small"
                  @click="machineInstructionControl(row, 'ONE')"
                  >设置</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 全局配置 -->
        <div class="allSetting">
          <h3 style="text-align: left">全局配置</h3>

          <div class="formItem">
            <span
              style="
                width: 70px;
                display: inline-block;
                text-align: right;
                margin-right: 18px;
              "
              >地址码：</span
            >
            <el-input-number
              v-model="instructPrefix"
              size="mini"
              :min="0"
              :max="255"
              :controls="false"
              style="width: 200px"
            >
            </el-input-number>

            <el-button
              style="margin-left: 20px"
              type="primary"
              icon="el-icon-setting"
              size="mini"
              @click="prefixInstructionControl(instructPrefix)"
              >设置</el-button
            >
          </div>

          <el-form
            :model="settingForm"
            ref="settingForm"
            :rules="rules"
            label-width="92px"
            :inline="false"
            size="mini"
            style="margin-top: 50px"
          >
            <el-form-item prop="ip" label="IP地址：" style="text-align: left">
              <el-input
                style="width: 200px"
                v-model="settingForm.ip"
              ></el-input>
            </el-form-item>
            <el-form-item prop="port" label="端口号：" style="text-align: left">
              <el-input
                style="width: 200px"
                v-model="settingForm.port"
              ></el-input>
              <el-button
                style="margin-left: 20px"
                type="primary"
                icon="el-icon-setting"
                size="mini"
                @click="updateIpPort('set')"
                >设置</el-button
              >

              <span
                class="onlinStatus"
                :class="{ online: deviceInfo.onlineStatus == '在线' }"
                >{{ deviceInfo.onlineStatus }}</span
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  searchMachineStatusAPI,
  machineFarawayControlAPI,
  machineInstructionControlAPI,
  prefixInstructionControlAPI,
  updateIpPortAPI
} from '@/api/index'
// @ is an alias to /src
// 引入 gojs 插件
import go from 'gojs'
export default {
  name: 'HomeView',
  data () {
    return {
      diagram: null,
      deviceInfo: {},
      channelInfoList: [],

      instructPrefix: undefined,
      settingForm: {
        ip: '',
        port: ''
      },
      rules: {
        ip: [
          { required: true, message: '请输入IP地址', trigger: 'blur' },
          {
            pattern:
              /^(((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))))$/,
            message: '请输入正确的ip地址',
            trigger: 'blur'
          }
        ],
        port: [
          { required: true, message: '请输入端口号', trigger: 'blur' },
          {
            pattern:
              /^((\d)|([1-9]\d{1,3})|([1-5]\d{4})|(6[0-4]\d{3})|(65[0-4]\d{2})|(655[0-2]\d{1})|(6553[0-5]))$/,
            message: '端口号范围为0~65535',
            trigger: 'blur'
          }
        ]
      },

      webSocket: null
    }
  },
  mounted () {
    this.initTuoPu()
    this.searchMachineStatus('mounted')
    this.prefixInstructionControl()
    this.updateIpPort()
    this.initWebSocket()
  },
  beforeDestroy () {
    // 组件销毁前停止ws通信
    this.webSocket.close()
  },
  methods: {
    // 查询设备状态、组一个列表
    async searchMachineStatus (state) {
      try {
        const { data } = await searchMachineStatusAPI({
          /* channelGain: '',
          channelInputNum: '',
          channelNum: '',
          commandEnum: '',
          instructPrefix: '',
          ip: '',
          port: 0 */
        })
        // console.log('设备状态信息', data)
        if (!data) return
        this.deviceInfo = data

        // 列表的基础形态 => 输入输出关系图
        const temArr =
          state == 'mounted'
            ? [...data.matrixChannelInfoList]
            : this.channelInfoList.map((item) => {
              return {
                channelNum: item.channelNum,
                channelInput: item.channelInput,
                channelGain: item.channelGain
              }
            })

        const tuoPuList = [
          /* { from: '输入1', to: '输出3' },
          { from: '输入2', to: '输出5' },
          { from: '输入3', to: '输出7' },
          { from: '输入4', to: '输出8' } */
        ]

        data.matrixChannelInfoList.forEach((item, index) => {
          if (state == 'mounted') {
            data.matrixChannelOutInfoList.some((innerItem) => {
              if (innerItem.channelNum == item.channelNum) {
                // item.channelGain = innerItem.channelGain
                // this.$set(item, 'channelGain', innerItem.channelGain)
                temArr[index].channelGain = innerItem.channelGain
                return true
              }
            })
          }

          // 遍历对象的key
          // 设置输入端口功率
          for (const key in data.channelInPower) {
            // console.log('输入key', key)
            if (key == item.channelInput) {
              // item.channelInPower = data.channelInPower[key]
              // this.$set(item, 'channelInPower', data.channelInPower[key])
              temArr[index].channelInPower = data.channelInPower[key]
              break
            }
          }

          // 设置输出端口功率
          for (const key in data.channelOutPower) {
            // console.log('输出key', key, item.channelNum, key == item.channelNum)
            if (key == item.channelNum) {
              // item.channelOutPower = data.channelOutPower[key]
              // this.$set(item, 'channelOutPower', data.channelOutPower[key])
              temArr[index].channelOutPower = data.channelOutPower[key]
              break
            }
          }

          tuoPuList.push({
            from: '输入' + item.channelInput,
            to: '输出' + item.channelNum
          })
        })
        this.loadTuopu(tuoPuList)
        // console.log('列表组合完毕:', temArr)

        this.channelInfoList = temArr
      } catch (error) {
        console.log(error)
      }
    },

    // 测试代码
    test () {
      /**
       * go.GraphObject.make  创造节点的方法
       *  一个非常简单的节点由一个shape和TextBlock构成
       *  原始方式是一个一个对象创造并设置其属性，并通过add方法把shape和textblock添加到节点上去，最后通过add方法把 节点node 添加到 图表diagram 上去
       *    但是这种原始方法难以维护和阅读，所以用更好的方式 => go.GraphObject.make
       *    go.GraphObject.make这个静态函数生成对象赋予其类，并提供初始属性或其他参数
       *    这个方法第一个参数是必须是一个 "类"类型，第二个参数通常是一个字符串（值是 Panel.type 的一种），第三个参数通常是样式对象，并且该样式对象支持在外面通过js语言设定变量在这里直接使用
       */
      const $ = go.GraphObject.make
      // 将图表绑定到dom元素
      this.diagram = $(go.Diagram, this.$refs.diagramDiv)

      // 设置图表的节点模板 => 自定义绑定的键  除了nodeTemplate还可以设置链接模板 linkTemplate
      this.diagram.nodeTemplate = $(
        go.Node,
        go.Panel.Auto, // 'Auto' => 和 go.Panel.Auto 等价
        /* 这里的可选值有
            go.Panel.Position  每个元素获得其正常大小 和位置有关，和后面设定的其他属性值无关
            go.Panel.Vertical  垂直面板 所有的元件排列垂直从上到下，每个元件获得其正常高度和任意宽度，或者拉伸时面板的宽度
            go.Panel.Horizontal 横向面板 属性和纵向面板基本相同只是排列顺序不同
            go.Panel.Auto  自动面板 自动布局
            go.Panel.Table  表格面板 里面的每个对象会由 row 和 column 属性来确定位置，类似索引值，从0开始
            go.Panel.Spot
            go.Panel.Viewbox
            go.Panel.Link
            go.Panel.Grid
        */
        /* {
          // 可以在这里统一设置对其样式和拉伸样式，就不用设置每个 元件 的了
          // defaultAlignment: go.Spot.Bottom
          // defaultStretch: go.GraphObject.Fill
        }, */
        // 在行对齐
        /* $(
          go.RowColumnDefinition,
          {
            column: 0,
            width: 200
          }
        ), */
        $(
          go.Shape, // 绘制一个几何图形
          'RoundedRectangle', // Rectangle 矩形   RoundedRectangle 圆角矩形
          {
            // figure: 'RoundedRectangle' // 和上面传参是等价的
            // width: 40,
            // height: 60,
            // margin: 10,
            // fill: null, // 填充颜色 => 背景色
            // stroke: '#394', // 边框颜色
            // strokeWidth: 4, // 边框宽度
            // angle: 45, // 旋转角度
            // scale: 1.5 // 缩放倍数
          },
          // 修改绑定的字段，比如原本设置颜色的字段是fill这里把fill绑定了color字段
          new go.Binding('fill', 'background'),
          new go.Binding('angle', 'angle'), // 旋转角度
          new go.Binding('scale', 'scale') // 缩放倍数
        ),
        $(
          go.TextBlock,
          {
            margin: 20, // margin表示文字到边框的距离
            editable: true // 支持用户编辑文字
            // isMultiline: false // 选中编辑时不可换行 => 默认可以换行
            // textAlign: 'right' // 排列方式 left center right  没有宽度的情况下怎么设置都是居中的
            // alignment: go.Spot.Center, // GraphObject.alignment属性，它控制在哪里放置由父级分配区域
            // background: 'black'  // 这个背景色是文本块的背景色，上面绑定的是外层Shape的背景色
            // width: 120
            // height: 50,
            // wrap: go.TextBlock.None // 文本块不换行剪裁 => 溢出后会隐藏
            // wrap: go.TextBlock.WrapDesiredSize // 文本块换行 => 宽度不够会换行
            // wrap: go.TextBlock.WrapFit // 文本块清理边距 => 作用不明
          },
          // text 文本内容 绑定为 key
          new go.Binding('text', 'key'),
          // stroke 文本颜色 绑定为 color
          new go.Binding('stroke', 'color'),
          // font 字体 绑定为 fontCss => css简写形式
          new go.Binding('font', 'fontCss'),
          new go.Binding('position', 'position'),
          new go.Binding('alignment', 'alignment')
        ),
        // new go.Binding('location', 'loc') // Part.location的值是一个点，因此，在实例中的数据属性必须是一个点
        // 这里可以通过转换函数的第三个参数绑定构造函数。在这种情况下Point.parse。允许位置字符串（“100 50”）的形式来指定，而不是作为一个表达式的点
        new go.Binding('location', 'loc', go.Point.parse)
      )

      this.diagram.linkTemplate = $(
        go.Link,
        $(
          go.Shape,
          new go.Binding('stroke', 'color'), // 连线颜色
          new go.Binding('strokeWidth', 'thick')
        ),
        $(go.Shape, {
          toArrow: 'OpenTriangle', // 设置箭头形状
          fill: '#000' // 定义箭头颜色
        })
      )

      // 给图表的模型传入具体数据和 传入两个参数 => 第一个是内容，第二个是连接状态
      this.diagram.model = new go.GraphLinksModel(
        [
          {
            key: '设备1',
            fontCss: 'bold 22px 楷体',
            // color: '#fff',
            background: 'lightblue',
            // angle: 30,
            // scale: 1
            // position: new go.Point(20, 60)
            // row: 0,
            // column: 0
            // loc: new go.Point(-100, 100)
            loc: '-100, 100'
          },
          {
            key: '设备2',
            // color: '#fff',
            background: 'orange',
            // angle: 60,
            // scale: 1.5
            // position: new go.Point(10, 30)
            // row: 0,
            // column: 1
            // loc: new go.Point(-100, 0)
            loc: '-100, 0'
          },
          {
            key: '设备3',
            fontCss: 'bold 16px 楷体',
            // color: '#fff',
            background: 'lightgreen',
            // angle: 10,
            // scale: 2
            // position: new go.Point(30, 20)
            // row: 0,
            // column: 2
            // loc: new go.Point(100, 100)
            loc: '100, 100'
          },
          {
            key: '设备4',
            // color: '#fff',
            background: 'pink',
            // angle: 90,
            // scale: 1.3
            // position: new go.Point(20, 30),
            // row: 0,
            // column: 3
            // loc: new go.Point(100, 0)
            loc: '100, 0'
          }
        ],
        [
          { from: '设备1', to: '设备2', color: '#8df', thick: 1 },
          { from: '设备1', to: '设备3', color: 'pink', thick: 1 },
          { from: '设备2', to: '设备2', color: 'red', thick: 1 },
          { from: '设备3', to: '设备4', color: 'yellowgreen', thick: 1 },
          { from: '设备4', to: '设备1', color: 'blue', thick: 1 }
        ]
      )
    },
    // 初始化拓扑图
    initTuoPu () {
      const $ = go.GraphObject.make
      this.diagram = $(go.Diagram, this.$refs.diagramDiv, {
        // 'undoManager.isEnabled': true, // 开启撤销功能 用户可以通过 ctrl z 撤销操作
        initialAutoScale: go.Diagram.Uniform, // 初次加载自适应容器大小
        isReadOnly: true, // 只读状态
        // 'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom // 滚轮缩放
        'toolManager.mouseWheelBehavior': null, // 滚轮缩放
        allowDragOut: false, // 禁止将节点拖出图表
        'animationManager.isEnabled': false // 禁用图表加载动画
      })

      // 禁用画布的平移工具
      this.diagram.toolManager.panningTool.isEnabled = false
      this.diagram.toolManager.actionTool.isEnabled = false

      // 定义节点模板函数
      const createNodeTemplate = (category) =>
        $(
          go.Node,
          'Vertical', // 垂直分布
          {
            locationSpot: go.Spot.Center, // 默认居中
            selectable: false,
            movable: false
          },
          new go.Binding('location', 'loc'),
          $(
            go.Panel,
            'Auto',
            $(go.Shape, 'Circle', { width: 50, height: 50, fill: '#1c9efe' }),
            $(
              go.TextBlock,
              { margin: 2, stroke: '#0d0d0d' },
              new go.Binding('text', 'key')
            )
          )
        )

      // 设置左侧节点模板
      this.diagram.nodeTemplate = createNodeTemplate()

      // 设置右侧节点模板
      this.diagram.nodeTemplateMap.add('RightNode', createNodeTemplate())

      // 设置连线模板
      this.diagram.linkTemplate = $(
        go.Link,
        {
          routing: go.Link.Normal,
          // routing: go.Link.AvoidsNodes, // 设置连线和节点不重叠
          // routing: go.Link.Orthogonal,
          curve: go.Link.None // 设置交叉线交叉部分的处理方式
          // corner: 5 // 连线拐角处的弧度
          // fromEndSegmentLength: 5 // 设置起始点到连接线拐点的距离
          // fromShortLength: 10 // 设置连线的起始点到起始端口的距离
          // toShortLength: 50 // 设置连线的结尾点到目标节点端口的距离
        },
        $(go.Shape, { strokeWidth: 2, stroke: '#000' }),
        $(go.Shape, {
          toArrow: 'Standard',
          fill: '#000',
          stroke: '#000',
          strokeWidth: 2
        })
      )

      // 添加外围矩形
      this.diagram.add(
        $(
          go.Part,
          { layerName: 'Background', selectable: false },
          $(go.Shape, {
            figure: 'Rectangle',
            fill: '#fff',
            stroke: '#fff',
            strokeWidth: 2,
            desiredSize: new go.Size(500, 800) // 设置矩形的尺寸
          })
        )
      )

      // 布局
      /* this.diagram.layout = $(go.LayeredDigraphLayout, {
        // direction: 90,
        layerSpacing: 50,
        columnSpacing: 5
      }) */
      this.loadTuopu([])
    },
    loadTuopu (linkDataArray) {
      const $ = go.GraphObject.make
      // 数据
      const nodeDataArray = [
        { key: '输入1', category: '' },
        { key: '输入2', category: '' },
        { key: '输入3', category: '' },
        { key: '输入4', category: '' },
        { key: '输出1', category: 'outNode' },
        { key: '输出2', category: 'outNode' },
        { key: '输出3', category: 'outNode' },
        { key: '输出4', category: 'outNode' },
        { key: '输出5', category: 'outNode' },
        { key: '输出6', category: 'outNode' },
        { key: '输出7', category: 'outNode' },
        { key: '输出8', category: 'outNode' }
      ]

      // 设置初始位置
      nodeDataArray.forEach((item) => {
        if (item.category === '') {
          item.loc = new go.Point(50, item.key.slice(-1) * 150 + 30)
        } else {
          item.loc = new go.Point(450, item.key.slice(-1) * 80 + 30)
        }
      })

      /* const linkDataArray = [
        { from: '输入1', to: '输出1' },
        { from: '输入2', to: '输出3' },
        { from: '输入3', to: '输出2' },
        { from: '输入4', to: '输出4' }
      ] */

      // 添加节点和连线
      this.diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray)
    },
    // 修改设备远控
    async changeDeviceState (newVal) {
      try {
        await machineFarawayControlAPI({ commandEnum: newVal })
        this.$message.success('切换成功！')
        this.searchMachineStatus()
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 设备指令控制
    async machineInstructionControl (row, commandEnum) {
      try {
        const res = await machineInstructionControlAPI({ ...row, commandEnum })
        if (res.code != 200) {
          this.$message.error(res.message)
        } else {
          this.$message.success('切换成功！')
          this.searchMachineStatus()
        }
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 设置命令前缀
    async prefixInstructionControl (instructPrefix) {
      try {
        const temObj = {}
        if (instructPrefix != undefined) temObj.instructPrefix = instructPrefix
        const { data } = await prefixInstructionControlAPI(temObj)
        // console.log('命令前缀回填', data)
        this.instructPrefix = data.instructPrefix
        this.$message.success('配置成功！')
      } catch (error) {
        console.log(error)
      }
    },
    // 设置IP端口
    async updateIpPort (flag) {
      if (flag == 'set') {
        this.$refs.settingForm.validate(async (valid) => {
          if (valid) {
            try {
              await updateIpPortAPI(this.settingForm)
              this.$message.success('配置成功！')
            } catch (error) {
              console.log(error)
              this.$message.error('配置失败！')
            }
          } else {
            return false
          }
        })
      } else {
        // 回填
        try {
          const { data } = await updateIpPortAPI({})
          // console.log('IP端口', data)
          this.settingForm.ip = data.ip
          this.settingForm.port = data.port
        } catch (error) {
          console.log(error)
        }
      }
    },
    mapQuality (key) {
      switch (key) {
        case '00':
          return '信号全偏低'
        case '01':
          return '信号正常'
        case '02':
          return '信号饱和'
        default:
          return ''
      }
    },

    initWebSocket () {
      const wsuri = window.webConfig.webBaseWSUrl + 'toec/matrix/123456'
      this.webSocket = new WebSocket(wsuri)
      this.webSocket.onmessage = this.webSocketOnMessage
      this.webSocket.onopen = this.webSocketOnOpen
      this.webSocket.onerror = this.webSocketOnError
      this.webSocket.onclose = this.webSocketClose
    },
    webSocketOnOpen () {
      console.log('websocket已打开')
    },
    webSocketOnError () {
      console.log('websocket发生了错误')
    },
    webSocketClose (e) {
      console.log('断开连接', e)
    },
    webSocketOnMessage (e) {
      if (!e.data) return
      const data = JSON.parse(e.data)
      // console.log('ws推送数据', data)
      if (data.updateflag != undefined) {
        if (data.updateflag == 1) {
          // 重新查询设备状态信息
          this.searchMachineStatus()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: calc(100vh - 50px);
  // background-color: #8df;
  padding: 10px 15px;

  .setting {
    height: 40px;
    line-height: 40px;
    // background-color: gray;
    margin-bottom: 10px;
    text-align: left;

    display: flex;

    .label {
      margin-right: 5px;
    }

    /deep/ .el-radio {
      color: #0d0d0d;
      line-height: 40px;
    }
  }

  .container {
    height: calc(100vh - 125px);
    // background-color: pink;
    display: flex;
    position: relative;

    .diagramDiv {
      width: 500px;
      // flex: 0 0 500px; /* 设置左侧盒子固定宽500px 不允许收缩 */
      height: 100%;
      background-color: #fff;
      margin-right: 15px;
      border: 1px solid #797979;
      border-radius: 5px;
    }

    /* .btns {
      position: absolute;
      z-index: 99;
      top: 30px;
      left: 0;
      height: 30px;
      width: 500px;
      display: flex;
      justify-content: space-around;
    } */

    .rightTable {
      flex: 1;
      height: 100%;
      background-color: #fff;
      border: 1px solid #797979;
      border-radius: 5px;
      padding: 10px;

      .topContainer {
        display: flex;
        justify-content: flex-start;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;

        .item {
          flex: 1;
          font-size: 18px;
          font-weight: 700;
        }
      }

      .table {
        height: 49vh;
        overflow: auto;

        /deep/ .el-table td {
          cursor: pointer;
          height: 20px;
        }
      }

      .allSetting {
        width: 100%;
        height: 28vh;
        margin-top: 10px;
        // background-color: #fff;

        .formItem {
          text-align: left;
          padding: 0px 5px;
          margin: 10px 0px;
        }

        /deep/ .el-form-item__label {
          font-size: 16px;
          color: #0d0d0d;
        }

        .onlinStatus {
          margin-left: 10px;
          font-weight: 700;
          color: #f56c6c;
          &.online {
            color: #67c23a;
          }
        }
      }
    }
  }
}
</style>
